<template>
  <div class="chart">
    <!-- 条件渲染 -->
    <el-button-group >
      <el-button type="primary" size="small">现有确诊</el-button>
      <el-button type="primary" size="small">累积确诊</el-button>
    </el-button-group>
    <!-- 地图 -->
    <div id="map"></div>
        <!-- 江西地图 -->
    <div id="map_jiangxi"></div>
  </div>
</template>
<script>
// vue模块化，表示对外暴露当前对象
export default {
  // 1. 数据
  data(){
    return {
      
    }
  },
  // 2. 方法
  methods:{    loadChinaMap(){
      let data = [
        { name: "北京", value: 5 },
        { name: "天津", value: 4 },
        { name: "河北", value: 3 },
        { name: "山西", value: 1 },
        { name: "内蒙古", value: 2 },
        { name: "辽宁", value: 3 },
        { name: "吉林", value: 3 },
        { name: "黑龙江", value: 2 },
        { name: "上海", value: 5 },
        { name: "江苏", value: 4 },
        { name: "浙江", value: 4 },
        { name: "安徽", value: 1 },
        { name: "福建", value: 1 },
        { name: "江西", value: 5 },
        { name: "山东", value: 2 },
        { name: "河南", value: 1 },
        { name: "湖北", value: 2 },
        { name: "湖南", value: 3 },
        { name: "广东", value: 5 },
        { name: "广西", value: 4 },
        { name: "海南", value: 6 },
        { name: "重庆", value: 3 },
        { name: "四川", value: 5 },
        { name: "贵州", value: 4 },
        { name: "云南", value: 4 },
        { name: "西藏", value: 1 },
        { name: "陕西", value: 1 },
        { name: "甘肃", value: 2 },
        { name: "青海", value: 4 },
        { name: "宁夏", value: 2 },
        { name: "新疆", value: 5 },
        { name: "台湾", value: 1 },
        { name: "香港", value: 1 },
        { name: "澳门", value: 4 },
        { name: "南海诸岛", value: 5 },
        { name: "南海诸岛", value: 5 },
      ];

      var mapdata = Highcharts.maps["cn/china"];
      var chart = Highcharts.mapChart("map", {
        title: "中国地图",
        colorAxis: {
          min: 0,
          max: 5,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [
          {
            mapData: mapdata,
            data,
            joinBy: "name",
            dataLabels:{
              enabled:true,
              color:"#fff",
              style:{"fontSize":"10px","fontWeight":"thin"},
              format:`{point.name}`
            }
          },
        ],
      });
    },
    loadjiangxiMap(){
      // 1. 获取地图数据
      let mapdata = Highcharts.maps['cn/jiangxi'];
      // 2. 渲染地图
      let map = Highcharts.mapChart('map_jiangxi', {
        title:{
          text:"江西疫情分布"
        },
        colorAxis: {
          min: 0,
          max: 20,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [{
          mapData: mapdata,
          data:[
            { name:"景德镇", value:4 },
            { name:"南昌", value:2 },
            { name:"上饶", value:10 },
            { name:"宜春", value:10 },
            { name:"新余", value:9 },
            { name:"吉安", value:10 },
            { name:"抚州", value:10 },
            { name:"鹰潭", value:1 },
            { name:"九江", value:10 },
            { name:"萍乡", value:2 }
          ],
          joinBy:"name",
          dataLabels:{
            enabled:true,
            color:"#fff",
            style:{"fontSize":"10px","fontWeight":"thin"},
            format:`{point.name}`
          }
        }]
      });
    }
  },
  // 3. 生命周期
  // vue实例创建完毕
  created() {
    // 加载数据，并且将数据更新到data中的变量中
  },
  // 数据绑定之后 vue实例-> 虚拟dom -> 数据绑定 -> 渲染地图
  mounted() {
    // 1. 加载中国地图
    this.loadChinaMap();
    // 2. 加载江西地图
    this.loadjiangxiMap();
  },
};
</script>

<style scoped>
#map,
#map_jiangxi {
  height: 700px;
}
</style>
